<template>
 <div>
     <div class="d-flex justify-content-center">
         <ad></ad>
             <div class="content col-12 col-lg-8">
                 <div class="card">
                     <div class="card-body">
                         <div class="card-title">{{article.atitle}}</div>
                         <div class="card-text article-info">
                             {{article.auid}} 发布时间：{{this.$moment(this.article.atime).format(('YYYY-MM-DD hh:mm:ss'))}}
                             <div class="operation">
                                  <span>
                                     <i class="iconfont icon-dianzan" @click="price()" ref="dz"></i>
                                     ({{$util.changeNum(article.prizeCount)||0}})
                                 </span>
                                <span>
                                    <i class="iconfont icon-chakan"></i>
                                    ({{$util.changeNum(article.readNum)||0}})
                                </span>
                                <span>
                                    <i class="iconfont icon-pinglun"></i>
                                   ({{$util.changeNum(article.commentCount)||0}})
                                </span>
                                <span>
                                    <i class="iconfont icon-shoucang"></i>
                                   ({{$util.changeNum(article.commentCount)||0}})
                                </span>
                            </div>
                        </div>
                         <div class="card-text pt-2" >
                             <mavon-editor class="position-relative mavonEditor col-12"
                                v-model="article.acontent"
                                :boxShadow='false'
                                :boxShadowStyle="'none'"
                                :previewBackground="'#ffffff'"

                               :toolbarsFlag="false" :defaultOpen='"preview"' :editable="false"
                              :ishljs ="true" :subfield="false" />
                         </div>
                         <comment v-if="article.articleId" :article="article"></comment>
                         <div class="d-flex flex-column  text-body bg-white border ">
                           <div class="pre p-4 mw-50" v-if="preNext.pre" @click="toDetail(preNext.pre.articleId)">上一篇：{{preNext.pre?preNext.pre.atitle:''}}</div>
                           <div class="pre p-4 mw-50" v-if="preNext.next" @click="toDetail(preNext.next.articleId)">下一篇：{{preNext.next?preNext.next.atitle:''}}</div>
                         </div>
                     </div>
                     <div class="card col-12 col-lg-12   relate-read"  v-for="(item,index) in other"  :key="index">
                    <div class="card-body">
                        <h4 class="card-title" @click="toOther(item)"><a  class="title-link text-body font-weight-bold">{{item.atitle}}</a></h4>
                        <p class="card-text">{{item.acontent}}</p>

                        <span href="#" class="card-link">作者：<span>{{item.auid}}</span> </span>
                        <a href="#" class="card-link">点赞({{$util.changeNum(item.prizeCount)||0}})</a>
                        <a href="#" class="card-link">评论({{$util.changeNum(item.commentCount)||0}})</a>
                        <a href="#" class="card-link">热度({{$util.changeNum(item.readNum)||0}})</a>
                         <span class="card-link d-lg-inline d-none">发布时间:{{$moment(item.atime).format(('YYYY-MM-DD hh:mm:ss'))}}</span>



                    </div>
             </div>
                 </div>

             </div>


         </div>
         <div class="other">

         </div>
     </div>
 </div>
</template>

<script>
import marked from 'marked'
import Vue from 'vue'
import hljs  from 'highlight.js'
import '@/assets/code/styles/dark.css'
import comment from '@/components/util/comment'
import ad from '@/components/util/ad'
 export default {
   data () {
     return {
         id:"",
         article:{ },
         preNext:{},
         toolPros:{
             defaultOpen:"preview"
         },
         userInfo:{
             seeCount:22,
             fansCount:333,
             priceCount:333,
             articleCount:2222
         },

         other:[],//关联阅读
     }
   },

   methods:{
     toDetail(item){
          this.$router.push('/homePage/readArticle?id='+item);
          // localStorage.setItem("tecArticle",JSON.stringify(item));
      },
     //阅读文章
     countNum(){
       this.$axios.get(this.$url+'readArticle?id='+this.id).then(res=>{

             let tmp = res.data.data;
             console.log(tmp);
       })
     },
      //获取上下文
      getPreArticle(){
        this.$axios.get(this.$url+"getPreArticle?articleId="+this.id+"&belong="+(this.article.type||'tec')).then(data=>{
            console.log(data.data.data);
            this.preNext= data.data.data;
        })
      },

       price(){
           this.$axios.get(this.$url+"priceArticle?id="+this.id).then(data=>{
               this.$refs.dz.style.color="yellow"
           })
       },
       //获取用户信息
       getUserInfo(id){
           this.$axios.get(this.$url+'getUserInfo?id='+JSON.parse(localStorage.getItem("tecArticle")).uid)
           .then(data=>{
               console.log(data.data)
           })
       },
       getCommentInfo(id){
           this.$axios.get(this.$url+'getCommentInfo?id='+JSON.parse(localStorage.getItem("tecArticle")).articleId)
           .then(data=>{
               console.log(data.data)
           })
       },
       getOther(){

           this.$axios.get(this.$url+'getOtherArticle?key=-1&type='+this.article.type)
           .then(data=>{
               this.other = data.data.data;
               console.log(data.data)
           })
       },
       toOther(item){
        this.$router.push('/homePage/readArticle?id='+item.articleId);
        localStorage.setItem("tecArticle",JSON.stringify(item));
         this.backToTop();
        },
        getArticle(){

                    let id = this.$route.query.id;
                    this.id = id;
                    this.$axios.get(this.$url+"getArticleDetail?id="+id).then(data=>{
                    this.article = data.data.data[0];
                //    console.log(this.article)
            })
        },
        backToTop(){
          this.$router.go(0);
          console.log(this.$refs.homePage)

        }








   },
   mounted (){
       this.getArticle();
       this.getOther();
        this.getPreArticle();
        this.countNum();

   },

   components: {
       comment,ad
   },
   watch:{
       $route(to,from){
           this.getArticle();
           this.countNum();
           this.getPreArticle();
       }
   }
 }
</script>

<style scoped lang='less'>
  .v-show-content{
    white-space: normal;
  }
  .relate-read{
    cursor: pointer;
  }
  .relate-read:hover{
    background: #fff; box-shadow: #ccc 1px 1px 8px;
    transform: scale(1.05);
    transition:all .5s ease;
  }
  .pre{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .pre:hover{
    background: #fff; box-shadow: #ccc 1px 1px 8px;
    transform: scale(1.05);
    transition:all .5s ease;
  }
.article-info{
    border-bottom: 1px solid #f5f6f7;
}
.v-note-wrapper{
    // 展示框
    border: none;
    z-index: 2
}
.user-icon{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.author-user{
    display: flex;
    align-items: center;
    justify-content: center;
    .home-road{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;

        span{
            font-size: 12px;
        }
    }

}
// f粉丝数量
    .fans{
          display: flex;
        align-items: center;
        justify-content: center;
        >div{
              display: flex;
              flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    }
    .content{
        .operation{

            display: flex;
            justify-content: space-between;
            font-size: 12px;
            float: right;
            span{
                 display: flex;
                justify-content: space-between;
                align-items: center;
                margin-left: 5px;
                cursor: pointer;
            }

        }
    }
.card-text,.card-title{
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.tag{
    border: 1px solid rgb(221, 214, 214);
    border-radius: 15px;
    background: yellowgreen;
    font-size: 12px;
}
.card-title{
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
.card-title:hover{
  color:blue;
}
.card-link{
  font-size: 0.8rem;
  cursor: pointer;
}
</style>
